<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>正文</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <style>
        body{
            margin: 0;
            padding: 0;
            font-family:"微软雅黑";
        }
        .content{
            margin-top: 88px;
            background-color: #f2f2f2;
        }
        .pics{
            background-color: #000000;
            padding-left: 30px;
            padding-right: 30px;
            height: 472px;
        }
        .title-h1{
            margin-top: 30px;
            flex-direction: row;
            margin-bottom: 20px;
            align-items: flex-end;
        }
        .h1{
            font-size: 34px;
            margin-right: 20px;
        }
        .info{
            margin-bottom: 20px;
            display:flex;
            flex-direction: row;
        }
        .zuozhe{
            font-size: 26px;
            color: #666666;
        }
        .text{
            font-size: 26px;
            color: #333333;
            line-height: 30;
        }
        .title-cont{
            flex-direction: row;
            margin-top: 30px;
            margin-bottom: 30px;
            border-bottom-style:solid;
            border-bottom-width:1px;
            border-bottom-color: #dddddd;
            padding-bottom: 20px;
        }
        .ico{
            background-color: #ff6600;
            width: 4px;
            height: 20px;
            margin-top: 6px;
        }
        .title{
            font-size: 28px;
            color: #333333;
            margin-left: 10px;
        }
        .comment-cont{
            background-color: #ffffff;
            padding-left: 30px;
            padding-right: 30px;
            width: 100%;

        }
        .comment-item{
            padding-top: 30px;
            display:flex;
            flex-direction: row;
        }
        .img{
            margin-right: 24px;
        }
        .input{
            background-color: #F5F8FA;
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 30px;
            padding-right: 30px;
            border-radius: 6px;
            height: 72px;
            width: 600px;
            font-size: 24px;
            color: #707070;
        }
        .comment-in{
            display:flex;
            flex-direction: column;
            flex: auto;
        }
        .comment-hist{

        }
        .name{
            font-size: 26px;
            color: #6b6b6b;
            margin-bottom: 20px;
        }
        .comment-nr{
            margin-bottom: 20px;
            font-size: 28px;
            color: #333333;
            width: 600px;
        }
        .time-hf{
            justify-content: space-between;
            margin-bottom: 30px;
            display:flex;
            flex-direction: row;
            width: 600px;
        }
        .time{
            color: #999999;
            font-size: 20px;
        }
        .hf{
            flex-direction: row;
        }
        .hf-text{
            font-size: 22px;
            color: #666666;
        }
        .comment_secondary{
            display:flex;
            flex-direction: row;
            background-color: #F5F8FA;
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 20px;
            padding-right: 30px;
            line-height: 30px;
            border-radius: 6px;
            margin-bottom: 30px;
            width: 600px;
        }
        .comment_secondary-text{
            font-size: 22px;
            color: #666666;
        }
        .comment_secondary-text2{
            font-size: 22px;
            color: #333333;
            width: 400px;
        }
        .operate{
            display:flex;
            flex-direction: row;
            justify-content: flex-start;
            position:fixed;
            width:750px;
            background-color: rgba(0,0,0,.7);
            height: 80px;
            padding-top: 30px;
            padding-left: 80px;
            padding-bottom: 10px;
            bottom:0;
        }
        .cell{
            flex: 1;
            display:flex;
            flex-direction: row;
        }
        .ico-cont{
            width: 40px;
            height: 30px;
            align-items: flex-start;
            margin-right: 10px;
        }
        .text-o{
            font-size: 22px;
            color: #ffffff;
            flex: auto;
        }

    </style>
</head>
<body>
<div>
    <div class="content">
        <div style="background-color: #ffffff;padding-left: 30px;padding-right: 30px;padding-bottom: 30px;margin-bottom: 20px;">
            <div class="pics" >
                <image style="width: 690px;height: 472px;" src="/resource/img/cg-2.jpg"></image>
            </div>
            <div class="title-h1">
                <text class="h1">相台月历</text>
                <text class="time">2017-05-24  20:18</text>
            </div>
            <div class="info">
                <text class="zuozhe">作者：</text>
                <text class="text">张欣欣</text>
            </div>
            <div class="info">
                <text class="zuozhe">描述：</text>
                <text class="text">描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息</text>
            </div>
        </div>
        <div class="comment-cont">
            <div class="title-cont">
                <div class="ico"></div>
                <text class="title">评论</text>
            </div>
            <div class="comment-item">
                <div class="img">
                    <image style="width: 66px;height: 66px;border-radius: 30px" src="/resource/img/tx1.jpg"></image>
                </div>
                <div class="comment-input">
                    <input ref="input" class="input" type="text">据说点赞才是学习的动力</input>
                </div>
            </div>
            <div class="comment-item">
                <div class="img">
                    <image style="width: 66px;height: 66px;border-radius: 30px" src="/resource/img/tx2.jpg"></image>
                </div>
                <div class="comment-in">
                    <div class="comment-hist">
                        <text class="name">bvydhifjkf</text>
                        <text class="comment-nr">视频是斯米兰麻？视频是斯米兰麻？视频是斯米兰麻？视频是斯米兰麻？视频是斯米兰麻？视频是斯米兰麻？</text>
                    </div>
                    <div class="time-hf">
                        <text class="time">06-03</text>
                        <div class="hf">
                            <text class="hf-text">回复 · </text>
                            <text class="hf-text">赞：1562</text>
                        </div>
                    </div>
                    <div class="comment_secondary">
                        <text class="comment_secondary-text">不谙世事的小米：</text>
                        <text class="comment_secondary-text2">是啊，可美了是啊，可美了是啊，可美了是啊，可美了是啊，可美了是啊，可美了是啊，可美了</text>
                    </div>
                </div>
            </div>
            <div class="comment-item">
                <div class="img">
                    <image style="width: 66px;height: 66px;border-radius: 30px" src="/resource/img/tx1.jpg"></image>
                </div>
                <div class="comment-in">
                    <div class="comment-hist">
                        <text class="name">我就是我</text>
                        <text class="comment-nr">很神奇</text>
                    </div>
                    <div class="time-hf">
                        <text class="time">昨天：21：00</text>
                        <div class="hf">
                            <text class="hf-text">回复 · </text>
                            <text class="hf-text">赞：32</text>
                        </div>
                    </div>
                </div>
            </div>
            <div class="comment-item">
                <div class="img">
                    <image style="width: 66px;height: 66px;border-radius: 30px" src="/resource/img/tx1.jpg"></image>
                </div>
                <div class="comment-in">
                    <div class="comment-hist">
                        <text class="name">我就是我</text>
                        <text class="comment-nr">很神奇</text>
                    </div>
                    <div class="time-hf">
                        <text class="time">昨天：21：00</text>
                        <div class="hf">
                            <text class="hf-text">回复 · </text>
                            <text class="hf-text">赞：32</text>
                        </div>
                    </div>
                </div>
            </div>
            <div class="comment-item">
                <div class="img">
                    <image style="width: 66px;height: 66px;border-radius: 30px" src="/resource/img/tx2.jpg"></image>
                </div>
                <div class="comment-in">
                    <div class="comment-hist">
                        <text class="name">我就是我</text>
                        <text class="comment-nr">很神奇</text>
                    </div>
                    <div class="time-hf">
                        <text class="time">昨天：21：00</text>
                        <div class="hf">
                            <text class="hf-text">回复 · </text>
                            <text class="hf-text">赞：32</text>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="operate">
            <div class="cell">
                <div class="ico-cont">
                    <image style="width: 32px;height: 28px;" src="/resource/img/share.png"></image>
                </div>
                <text class="text-o">转发 · 324</text>
            </div>
            <div class="cell">
                <div class="ico-cont">
                    <image style="width: 32px;height: 28px;" src="/resource/img/msg.png"></image>
                </div>
                <text class="text-o">评论 · 127</text>
            </div>
            <div class="cell">
                <div class="ico-cont">
                    <image style="width: 30px;height: 30px;" src="/resource/img/zan-s.png"></image>
                </div>
                <text class="text-o">点赞 · 3455</text>
            </div>
        </div>
    </div>
</div>

</body>
</html>